<template>
	<view class="category">
		<!-- <view class="title">专业方向</view> -->
		<view class="list">
			<view class="opt" v-for="item in arr">
				<navigator class="link" :url="`/pages/category/category?text=${item.text}`">
					{{item.text}}
				</navigator>
			</view>
		</view>
	</view>
</template>

<script setup>
// 自定义属性 接收index组件传递过来的数据
// defineProps(['arr'])
defineProps({
	arr: {
		type: Array
	}
})
</script>

<style lang="scss">
.category {
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	width: 100%;
	.list {
		width: 100%;
		// 设置网格布局（行与列）
		display: grid;
		// 划分4列，每一列宽度25%
		grid-template-columns: repeat(4,25%);
		// 每一行高度自动撑开
		grid-auto-rows: auto;
		row-gap: 10rpx;
		column-gap: 2rpx;
		.opt {
			border: 1px solid #f0f0f0;
			box-sizing: border-box;
			.link {
				display: block;
				padding: 30rpx 0;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}
}
</style>